<template>
  <div class="role-list">
    <page-box>
      <template #search>
        <search-form :fieldList="STATE.fieldList" :form="STATE.form"></search-form>
      </template>
      <template #btn>
        <el-button @click="search">查询</el-button>
        <el-button type="primary" @click="onJump">新建</el-button>
      </template>
      <template #table>
        <resize-table
          :showPagination="true"
          :data="STATE.tableData"
          :pagingData="STATE.pagingData"
          @onPageChange="handleCurrentChange"
          @onPageSizeChange="handleSizeChange"
          @onCheckHeadersChange="checkHeadersChange"
          :headers="STATE.headers"
        >
          <template #oprate="{ scope }">
            <el-button type="text" @click="editRole(scope.row)">编辑</el-button>
            <el-button type="text" @click="delRole(scope.row)">删除</el-button>
          </template>
        </resize-table>
      </template>
    </page-box>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, onMounted, markRaw } from 'vue'
import pageBox from '@common/components/page-box.vue'
import searchForm from '@common/components/base-form/form.vue'
import resizeTable from '@common/components/resize-table/index.vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getRoleList, deleteRole } from '@app/base/apis/role-config'
import deleteIcon from '@/common/components/delete-icon/index.vue'
export default defineComponent({
  name: 'roleConfig',
  components: { searchForm, resizeTable, pageBox },
  // ----------------生命周期-----------------------
  setup() {
    {
      interface State {
        tableData: Record<string, unknown>[]
        form: Record<string, unknown>
        pagingData: Record<string, unknown>
      }
      const STATE: State = reactive({
        // 动态表单检索
        fieldList: [
          {
            name: '角色类型',
            field: 'type',
            type: 'dropdown',
            choices: [
              { label: '管理员', value: 'admin' },
              // { label: '呼叫客服', value: 'userCall' },
              { label: '自定义客服', value: 'custom' }
            ]
          }
        ],
        // 检索表单
        form: { type: '' },
        title: '新建角色',
        tableData: [],
        // 表头数据
        headers: [
          { label: '角色名称', prop: 'name', show: true },
          { label: '角色类型', prop: 'typeName', width: 150, show: true },
          { label: '描述', prop: 'description', width: 150, show: true },
          { label: '操作', prop: 'oprate', show: true }
        ],
        // 分页数据
        pagingData: { page: 1, total: 0, limit: 10 }
      })
      const ROUTER = useRouter()
      // 编辑角色
      const editRole = (row: any) => {
        console.log(row, 'row')
        ROUTER.push({
          name: 'editRole',
          params: { data: JSON.stringify(row) }
        })
      }
      // 新建角色
      const onJump = () => {
        ROUTER.push({
          name: 'editRole'
        })
      }
      // 删除角色
      const delRole = (row: any) => {
        ElMessageBox.confirm('删除角色后不可找回，请谨慎操作。', '删除', {
          confirmButtonText: '确认删除',
          cancelButtonText: '取消',
          type: 'warning',
          icon: markRaw(deleteIcon)
        })
          .then(() => {
            deleteRole({ _id: row._id }).then((res) => {
              if (res && res.success) {
                ElMessage.success('删除成功')
                getTableData()
              }
            })
          })
          .catch()
      }

      const search = () => {
        getTableData()
      }

      // 获取表格数据
      const getTableData = () => {
        const sendData: any = {
          ...STATE.form,
          limit: STATE.pagingData.limit,
          page: STATE.pagingData.page
        }
        getRoleList(sendData).then((res: any) => {
          if (res && res.success) {
            if (res.data) {
              STATE.tableData = res.data.list || []
              STATE.pagingData.total = res.data.count
            }
          } else {
            STATE.tableData = []
          }
          STATE.tableData = STATE.tableData.map((item: any) => {
            if (item.type === 'admin') {
              item.typeName = '管理员'
            } else if (item.type === 'userCall') {
              item.typeName = '呼叫中心'
            } else {
              item.typeName = '自定义客服'
            }
            return item
          })
        })
      }

      onMounted(async () => {
        await getTableData()
      })

      return {
        STATE,
        editRole,
        delRole,
        onJump,
        search
      }
    }
  }
})
</script>

<style lang="stylus" scoped>
.role-list
  padding 24px
</style>
